<style lang="scss" scoped>
  .li{
    border: 1px solid #0f3056;
    background-color: #091f2d;
    width: 1640px;
    height: 649px;
    margin-bottom: 50px;
    .top{
      padding: 0px 33px 0;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 102px;
      position: relative;
      &:before{
        content:'';
        display: block;
        position: absolute;
        left: 32px;
        top: 101px;
        width: 1552px;
        height: 0px;
        border: 1px solid #40A0FC;
        opacity: 0.2;

      }
      .img{
        width: 44px;
        height: 44px;
        margin-right: 40px;
      }
      .title{
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #3E9FCB;
        opacity: 1;
      }
      .block{
        position: absolute;
        right: 39px;
        top: 32px;
        /*width: 261px;*/
        /*height: 60px;*/
        .demonstration{
          display: none;
        }
      }
    }
    .context{
      display: flex;
      justify-content: space-between;
      .left{
        width: 820px;
        position: relative;
        .flag_l{
          padding: 37px 88px 0;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #87ADE0;
          opacity: 1;
        }
        .l_chart{
          display: flex;
          justify-content: center;
        }
        .flag{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          padding: 0 30px;
          box-sizing: border-box;
          .flag_r1{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 24px;
            .flag_r1_1{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 16px;
                height: 0px;
                border: 1px solid #A24914;
                opacity: 1;
                position: relative;
                &:before{
                  content:'';
                  display: block;
                  position: absolute;
                  left: 16px;
                  top: -7px;
                  width: 12px;
                  height: 12px;
                  border: 1.5px solid #A24914;
                  border-radius: 50%;
                }
                &:after{
                  content:'';
                  display: block;
                  position: absolute;
                  left: 30px;
                  top: -1px;
                  width: 15px;
                  height: 0px;
                  border: 1px solid #A24914;
                }
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 36px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r1_2{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #40A0FC;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r1_3{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px dashed #00D1E3;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
          }
          .flag_r2{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 24px;
            .flag_r2_1{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #3E9FCB;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r2_2{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px dashed #40A0FC;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r2_3{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #805437;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
          }
          .flag_r3{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 24px;
            width: 560px;
            .flag_r3_1{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 16px;
                height: 0px;
                border: 1px solid #E3E3E3;
                opacity: 1;
                position: relative;
                &:before{
                  content:'';
                  display: block;
                  position: absolute;
                  left: 16px;
                  top: -7px;
                  width: 12px;
                  height: 12px;
                  border: 1.5px solid #E3E3E3;
                  border-radius: 50%;
                }
                &:after{
                  content:'';
                  display: block;
                  position: absolute;
                  left: 30px;
                  top: -1px;
                  width: 15px;
                  height: 0px;
                  border: 1px solid #E3E3E3;
                }
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 36px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r3_2{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #1CB961;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r3_3{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #87ADE0;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
          }
          .flag_r4{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 24px;
            .flag_r4_1{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #E3E3E3;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r4_2{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #00D1E3;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r4_3{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px dashed #87ADE0;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
          }
        }
        &:before{
          content:'';
          display: block;
          position: absolute;
          right: 0;
          top: 105px;
          width: 0px;
          height: 350px;
          border: 1px solid #40A0FC;
          opacity: 0.2;
        }
      }
      .right{
        width: 820px;
        position: relative;
        .flag_l{
          padding: 37px 88px 0;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #87ADE0;
          opacity: 1;
        }
        .l_chart{
          display: flex;
          justify-content: center;
        }
        .flag{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          padding: 0 30px;
          box-sizing: border-box;
          .flag_r1{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 24px;
            .flag_r1_1{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 16px;
                height: 0px;
                border: 1px solid #A24914;
                opacity: 1;
                position: relative;
                &:before{
                  content:'';
                  display: block;
                  position: absolute;
                  left: 16px;
                  top: -7px;
                  width: 12px;
                  height: 12px;
                  border: 1.5px solid #A24914;
                  border-radius: 50%;
                }
                &:after{
                  content:'';
                  display: block;
                  position: absolute;
                  left: 30px;
                  top: -1px;
                  width: 15px;
                  height: 0px;
                  border: 1px solid #A24914;
                }
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 36px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r1_2{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #40A0FC;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r1_3{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px dashed #00D1E3;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
          }
          .flag_r2{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 24px;
            .flag_r2_1{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #3E9FCB;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r2_2{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px dashed #40A0FC;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r2_3{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #805437;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
          }
          .flag_r3{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 24px;
            width: 560px;
            .flag_r3_1{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 16px;
                height: 0px;
                border: 1px solid #E3E3E3;
                opacity: 1;
                position: relative;
                &:before{
                  content:'';
                  display: block;
                  position: absolute;
                  left: 16px;
                  top: -7px;
                  width: 12px;
                  height: 12px;
                  border: 1.5px solid #E3E3E3;
                  border-radius: 50%;
                }
                &:after{
                  content:'';
                  display: block;
                  position: absolute;
                  left: 30px;
                  top: -1px;
                  width: 15px;
                  height: 0px;
                  border: 1px solid #E3E3E3;
                }
              }
              .name{
                width: 90px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 36px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r3_2{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #1CB961;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r3_3{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #87ADE0;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
          }
          .flag_r4{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 24px;
            .flag_r4_1{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #E3E3E3;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r4_2{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px solid #00D1E3;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
            .flag_r4_3{
              margin-left: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              .line{
                width: 48px;
                height: 0px;
                border: 1px dashed #87ADE0;
                opacity: 1;
                position: relative;
              }
              .name{
                width: 80px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #767e85;
                opacity: 1;
                margin-left: 12px;
                .mini{
                  font-size:9px;
                }
              }
            }
          }
        }
      }
    }

  }
</style>
<style lang="scss" >
  .lines_echarts_datepicker{
    .el-input__inner{
      /*width: 261px;*/
      /*height: 60px;*/
      background: #001A2E;
      border: 1px solid rgba(227, 227, 227, 0.25098039215686274);
      opacity: 1;
      border-radius: 4px;

    }
    input::-webkit-input-placeholder{
      color:#5f646f;
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
      color:#5f646f;
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
      color:#5f646f;
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
      color:#5f646f;
    }


  }
</style>
<template>
  <div class="li">
    <div class="top">
      <img src="icons02/@2x/haodianliang@2x.png" class="img">
      <span class="title">耗电量</span>
      <div class="block">
        <el-date-picker
          class="lines_echarts_datepicker"
          v-model="value1"
          value-format="yyyy-MM-dd"
          @change="changeDate"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
    <div class="context">
      <div class="left">
        <div class="flag_l">
          用电量 （kw·h）
        </div>
        <Linechartstrans :commonEchartsObj="countDeliverRecord" class="l_chart"></Linechartstrans>
        <div class="flag">
          <div class=" flag_r1">
            <div class=" flag_r1_1">
              <div class="line"></div>
              <div class="name">总量</div>
            </div>
            <div class="flag_r1_2 ">
              <div class="line"></div>
              <div class="name">液压电机</div>
            </div>
            <div class="flag_r1_3">
              <div class="line"></div>
              <div class="name">搅拌电机</div>
            </div>
          </div>
          <div class=" flag_r2">
            <div class="flag_r2_1">
              <div class="line"></div>
              <div class="name">空气能加热</div>
            </div>
            <div class="flag_r2_2">
              <div class="line"></div>
              <div class="name">电辅热</div>
            </div>
            <div class="flag_r2_3">
              <div class="line"></div>
              <div class="name">风辅热</div>
            </div>
          </div>
          <div class=" flag_r3">
            <div class=" flag_r3_1">
              <div class="line"></div>
              <div class="name">除臭</div>
            </div>
            <!--<div class="flag_r3_2 ">-->
              <!--<div class="line"></div>-->
              <!--<div class="name">传送</div>-->
            <!--</div>-->
            <!--<div class="flag_r3_3">-->
              <!--<div class="line"></div>-->
              <!--<div class="name">进料仓门</div>-->
            <!--</div>-->
          </div>
          <!--<div class=" flag_r4">-->
            <!--<div class="flag_r4_1">-->
              <!--<div class="line"></div>-->
              <!--<div class="name">挤压</div>-->
            <!--</div>-->
            <!--<div class="flag_r4_2">-->
              <!--<div class="line"></div>-->
              <!--<div class="name">搅拌加热</div>-->
            <!--</div>-->
            <!--<div class="flag_r4_3">-->
              <!--<div class="line"></div>-->
              <!--<div class="name">出料仓门</div>-->
            <!--</div>-->
          <!--</div>-->
        </div>
      </div>
      <div class="right">
        <div class="flag_l">
          电流 （A）
        </div>
        <Linechartstrans :commonEchartsObj="countDeliverRecord8" class="l_chart"></Linechartstrans>
        <div class="flag">
          <div class=" flag_r1">
            <div class=" flag_r1_1">
              <div class="line"></div>
              <div class="name">总量</div>
            </div>
            <div class="flag_r1_2 ">
              <div class="line"></div>
              <div class="name">液压电机</div>
            </div>
            <div class="flag_r1_3">
              <div class="line"></div>
              <div class="name">搅拌电机</div>
            </div>
          </div>
          <div class=" flag_r2">
            <div class="flag_r2_1">
              <div class="line"></div>
              <div class="name">空气能加热</div>
            </div>
            <div class="flag_r2_2">
              <div class="line"></div>
              <div class="name">电辅热</div>
            </div>
            <div class="flag_r2_3">
              <div class="line"></div>
              <div class="name">风辅热</div>
            </div>
          </div>
          <div class=" flag_r3">
            <div class=" flag_r3_1">
              <div class="line"></div>
              <div class="name">除臭</div>
            </div>
            <!--<div class="flag_r3_2 ">-->
            <!--<div class="line"></div>-->
            <!--<div class="name">传送</div>-->
            <!--</div>-->
            <!--<div class="flag_r3_3">-->
            <!--<div class="line"></div>-->
            <!--<div class="name">进料仓门</div>-->
            <!--</div>-->
          </div>
          <!--<div class=" flag_r4">-->
          <!--<div class="flag_r4_1">-->
          <!--<div class="line"></div>-->
          <!--<div class="name">挤压</div>-->
          <!--</div>-->
          <!--<div class="flag_r4_2">-->
          <!--<div class="line"></div>-->
          <!--<div class="name">搅拌加热</div>-->
          <!--</div>-->
          <!--<div class="flag_r4_3">-->
          <!--<div class="line"></div>-->
          <!--<div class="name">出料仓门</div>-->
          <!--</div>-->
          <!--</div>-->
        </div>
      </div>
    </div>


  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'
  import {listModularElectricityByDay,listModularElectricityCurrentByDay
  } from "@/api/device/perichart";
  import Linechartstrans from './linechartstrans.vue'
  export default {

    data() {
      return {
        value1: moment().format('YYYY-MM-DD'),
        countDeliverRecord: {
          echarts_name: `lines7`,
          line_list: [],
          line_date: [],
        },
        countDeliverRecord8: {
          echarts_name: `lines8`,
          line_list: [],
          line_date: [],
        },
      }
    },
    props: ['periViewRow'],
    mounted() {
      this.initData()

    },
    watch: {

    },
    components: {
      Linechartstrans
    },
    methods: {
      changeDate(v) {
        this.initData()
      },
      initData() {
        listModularElectricityByDay({deviceId: this.periViewRow.id, createTime:this.value1})
          .then(res => {
            let arr1 = [], arr2 = [], arr3=[],arr4 = [], arr5 = [], arr6=[],arr7 = [];
            this.countDeliverRecord.line_date = [];
            (res.data.total || []).forEach(item => {
              this.countDeliverRecord.line_date.push(item.time)
              arr1.push(item.number)

            });
            (res.data.type1 || []).forEach(item => {
              arr2.push(item.number)
            });
            (res.data.type2 || []).forEach(item => {
              arr3.push(item.number)
            });
            (res.data.type3 || []).forEach(item => {
              arr4.push(item.number)
            });
            (res.data.type4 || []).forEach(item => {
              arr5.push(item.number)
            });
            (res.data.type5 || []).forEach(item => {
              arr6.push(item.number)
            });
            (res.data.type6 || []).forEach(item => {
              arr7.push(item.number)
            });
            var series = [
              {
                name: '总量',
                type: 'line',
                showSymbol: true,
                symbol: 'circle',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#A24914',
                lineStyle: {
                  width: 0.5,
                  color: '#A24914'
                },
                itemStyle: {
                  shadowBlur: 12,
                  shadowColor: '#A24914',
                  opacity:0.1,
                  normal: {
                    color: "#091f2d",
                    borderWidth: 1,
                    borderColor: '#A24914',
                    width: 3,
                    lineStyle: {
                      color: "#A24914",
                      width: 1,
                    }
                  }
                },
                data: arr1
              },
              {
                name: '液压电机',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
//                symbolSize: 6,
                colorClass: '#40A0FC',
                lineStyle: {
                  color: '#40A0FC'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#40A0FC',
                  shadowBlur: 12,
                  shadowColor: '#40A0FC',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#40A0FC",
                      width: 1,
//                      type:'dotted'
                    },
                    borderWidth: 1,
                    borderColor: '#40A0FC',
                  }
                },
                data: arr2
              },
              {
                name: '搅拌电机',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#00D1E3',
                lineStyle: {
                  width: 0.5,
                  color: '#00D1E3'
                },
                itemStyle: {
                  shadowBlur: 12,
                  shadowColor: '#00D1E3',
                  opacity:0.1,
                  normal: {
                    color: "#091f2d",
                    borderWidth: 1,
                    borderColor: '#00D1E3',
                    width: 3,
                    lineStyle: {
                      color: "#00D1E3",
                      width: 1,
                      type:'dotted'
                    }
                  }
                },
                data: arr3
              },
              {
                name: '空气能加热',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#3E9FCB',
                lineStyle: {
                  color: '#3E9FCB'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#3E9FCB',
                  shadowBlur: 12,
                  shadowColor: '#3E9FCB',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#3E9FCB",
                      width: 1,
//                      type:'dotted'
                    },
                    borderWidth: 1,
                    borderColor: '#3E9FCB',
                  }
                },
                data: arr4
              },
              {
                name: '电辅热',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#40A0FC',
                lineStyle: {
                  width: 0.5,
                  color: '#40A0FC'
                },
                itemStyle: {
                  shadowBlur: 12,
                  shadowColor: '#40A0FC',
                  opacity:0.1,
                  normal: {
                    color: "#091f2d",
                    borderWidth: 1,
                    borderColor: '#40A0FC',
                    width: 3,
                    lineStyle: {
                      color: "#40A0FC",
                      width: 1,
                      type:'dotted'
                    }
                  }
                },
                data: arr5
              },
              {
                name: '风辅热',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#805437',
                lineStyle: {
                  color: '#805437'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#805437',
                  shadowBlur: 12,
                  shadowColor: '#805437',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#805437",
                      width: 1,
//                      type:'dotted'
                    },
                    borderWidth: 1,
                    borderColor: '#805437',
                  }
                },
                data: arr6
              },
              {
                name: '除臭',
                type: 'line',
                showSymbol: true,
                symbol: 'circle',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#E3E3E3',
                lineStyle: {
                  color: '#E3E3E3'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#E3E3E3',
                  shadowBlur: 12,
                  shadowColor: '#E3E3E3',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#E3E3E3",
                      width: 1,
//                      type:'dotted'
                    },
                    borderWidth: 1,
                    borderColor: '#E3E3E3',
                  }
                },
                data: arr7
              },
            ];
            this.$set(this.countDeliverRecord, 'line_list', series);
          })

        listModularElectricityCurrentByDay({deviceId: this.periViewRow.id, createTime:this.value1})
          .then(res => {
            let arr1 = [], arr2 = [], arr3=[],arr4 = [], arr5 = [], arr6=[],arr7 = [];
            this.countDeliverRecord8.line_date = [];
            (res.data.total || []).forEach(item => {
              this.countDeliverRecord8.line_date.push(item.time)
              arr1.push(item.number)
            });
            (res.data.type1 || []).forEach(item => {
              arr2.push(item.number)
            });
            (res.data.type2 || []).forEach(item => {
              arr3.push(item.number)
            });
            (res.data.type3 || []).forEach(item => {
              arr4.push(item.number)
            });
            (res.data.type4 || []).forEach(item => {
              arr5.push(item.number)
            });
            (res.data.type5 || []).forEach(item => {
              arr6.push(item.number)
            });
            (res.data.type6 || []).forEach(item => {
              arr7.push(item.number)
            });
            var series = [
              {
                name: '总量',
                type: 'line',
                showSymbol: true,
                symbol: 'circle',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#A24914',
                lineStyle: {
                  width: 0.5,
                  color: '#A24914'
                },
                itemStyle: {
                  shadowBlur: 12,
                  shadowColor: '#A24914',
                  opacity:0.1,
                  normal: {
                    color: "#091f2d",
                    borderWidth: 1,
                    borderColor: '#A24914',
                    width: 3,
                    lineStyle: {
                      color: "#A24914",
                      width: 1,
                    }
                  }
                },
                data: arr1
              },
              {
                name: '液压电机',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#40A0FC',
                lineStyle: {
                  color: '#40A0FC'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#40A0FC',
                  shadowBlur: 12,
                  shadowColor: '#40A0FC',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#40A0FC",
                      width: 1,
//                      type:'dotted'
                    },
                    borderWidth: 1,
                    borderColor: '#40A0FC',
                  }
                },
                data: arr2
              },
              {
                name: '搅拌电机',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
//                symbolSize: 6,
                colorClass: '#00D1E3',
                lineStyle: {
                  width: 0.5,
                  color: '#00D1E3'
                },
                itemStyle: {
                  shadowBlur: 12,
                  shadowColor: '#00D1E3',
                  opacity:0.1,
                  normal: {
                    color: "#091f2d",
                    borderWidth: 1,
                    borderColor: '#00D1E3',
                    width: 3,
                    lineStyle: {
                      color: "#00D1E3",
                      width: 1,
                      type:'dotted'
                    }
                  }
                },
                data: arr3
              },
              {
                name: '空气能加热',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#3E9FCB',
                lineStyle: {
                  color: '#3E9FCB'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#3E9FCB',
                  shadowBlur: 12,
                  shadowColor: '#3E9FCB',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#3E9FCB",
                      width: 1,
//                      type:'dotted'
                    },
                    borderWidth: 1,
                    borderColor: '#3E9FCB',
                  }
                },
                data: arr4
              },
              {
                name: '电辅热',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#40A0FC',
                lineStyle: {
                  width: 0.5,
                  color: '#40A0FC'
                },
                itemStyle: {
                  shadowBlur: 12,
                  shadowColor: '#40A0FC',
                  opacity:0.1,
                  normal: {
                    color: "#091f2d",
                    borderWidth: 1,
                    borderColor: '#40A0FC',
                    width: 3,
                    lineStyle: {
                      color: "#40A0FC",
                      width: 1,
                      type:'dotted'
                    }
                  }
                },
                data: arr5
              },
              {
                name: '风辅热',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#805437',
                lineStyle: {
                  color: '#805437'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#805437',
                  shadowBlur: 12,
                  shadowColor: '#805437',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#805437",
                      width: 1,
//                      type:'dotted'
                    },
                    borderWidth: 1,
                    borderColor: '#805437',
                  }
                },
                data: arr6
              },
              {
                name: '除臭',
                type: 'line',
                showSymbol: true,
                symbol: 'circle',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#E3E3E3',
                lineStyle: {
                  color: '#E3E3E3'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#E3E3E3',
                  shadowBlur: 12,
                  shadowColor: '#E3E3E3',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#E3E3E3",
                      width: 1,
//                      type:'dotted'
                    },
                    borderWidth: 1,
                    borderColor: '#E3E3E3',
                  }
                },
                data: arr7
              },
            ];
            this.$set(this.countDeliverRecord8, 'line_list', series);
          })
      }

    },
    beforeDestroy() {

    }
  }
</script>
